<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>企业图谱</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="./plugins/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="./css/main.css">
</head>

<body>
  <div class='content'>
    <div class="box">
      <div class="box-header">
        <div class="header-title">企业图谱</div>
      </div>
      <div class="box-body">
        <div class="chart" id="graphChart" style="height:800px;"></div>
      </div>
    </div>
  </div>
  <script src="./plugins/jquery/jquery.min.js"></script>
  <script src="js/echarts.js"></script>
  <script>
    $(function () {
      // 企业图谱
      var myChart = echarts.init(document.getElementById('graphChart'))
      var colorList = ["#2B9DF8", '#FBB969', '#F36154', '#3EC3CE', '#B1C5D4', '#705AFC', '#4363DA', '#00E574', '#848423', 'orange']
      var data = [{
        id:'1',
        name:'云天化',
        category:0,
        children:[{
          id:'11',
          name:'集团',
          category:1,
          children:[{
            id:'111',
            name:'集团0',
            category:2,
            children:[{
              id:'1111',
              name:'集团公司1',
              category:3,
            },{
              id:'1112',
              name:'集团公司2',
              category:3,
            },{
              id:'1113',
              name:'集团公司3',
              category:3,
            },{
              id:'1114',
              name:'集团公司4',
              category:3,
            },{
              id:'1115',
              name:'集团公司5',
              category:3,
            }]
          }]
        },{
          id:'12',
          name:'高管',
          category:1,
          children:[{
            id:'121',
            name:'董事',
            category:2,
            chidlren:[{
              id:'1211',
              name:'董事1',
              category:3,
            },{
              id:'1212',
              name:'董事2',
              category:3,
            },{
              id:'1213',
              name:'董事3',
              category:3,
            },{
              id:'1214',
              name:'董事4',
              category:3,
            },]
          }]
        },{
          id:'13',
          name:'诉讼',
          category:1,
          children:[{
            id:'131',
            name:'原告',
            category:2,
            children:[{
              id:'1311',
              name:'华民股份',
              category:3
            }]
          }]
        },{
          id:'14',
          name:'上游',
          category:1
        },{
          id:'15',
          name:'下游',
          category:1,
          children:[{
            id:'151',
            name:'客户',
            category:2,
            children:[{
              id:'1511',
              name:'客户1',
              category:3,
            },{
              id:'1512',
              name:'客户2',
              category:3,
            },{
              id:'1513',
              name:'客户3',
              category:3,
            }]
          }]
        },{
          id:'16',
          name:'债务',
          category:1
        },{
          id:'17',
          name:'股东',
          category:1
        },{
          id:'18',
          name:'投资',
          category:1
        },{
          id:'19',
          name:'并购',
          category:1
        },{
          id:'20',
          name:'同行',
          category:1,
        },{
          id:'21',
          name:'概念',
          category:1
        }]
      }]
      var listdata = []
      var linksdata = []

      function setNodeData (data, color) {
        $.each(data,function(index, item) {
          var obj = {
            "draggable": "true"
          }
          obj.itemStyle = {}
          obj.name = item.name
          obj.category = item.category
          if(item.category == 0) {
              obj.itemStyle.color = '#e4393c'
          }else if(item.category > 1) {
            obj.itemStyle.color = color
          }else {
            obj.itemStyle.color = colorList[index]
          }
          if(item.category == 3) {
            obj.label = {}
            obj.label.position = 'bottom'
            obj.label.color = '#666'
          }
          listdata.push(obj)
          if(item.children && item.children.length > 0) {
            setNodeData(item.children, obj.itemStyle.color)
          }
        })
      }

      function setLinkData (data, name) {
        $.each(data,function(index, item) {
          if(item.category !==0) {
            var obj = {
              
            }
            obj.lineStyle = {
              color:'source'
            }
            
            obj.source = name
            obj.target = item.name
            linksdata.push(obj)
            if(item.children && item.children.length > 0) {
              setLinkData(item.children, item.name)
            }
          }else {
            if(item.children && item.children.length > 0) {
              setLinkData(item.children, item.name)
            }
          }
        })
      }
      
      setNodeData(data)
      setLinkData(data)
      var option = {
        tooltip: {
          formatter: '{b}'
        },
        legend: {
          show: false,
          
          data: [{
              name: '父节点',
              icon: 'circle',
            },
            {
              name: '层级二',
              icon: 'circle'
            }, {
              name: '层级三',
              icon: 'circle'
            }
          ],
          textStyle: {
            color: '#333'
          },
          icon: 'circle',
          type: 'scroll',
          orient: 'horizontal',
          left: 10,
          top: 20,
          bottom: 20,
          itemWidth: 10,
          itemHeight: 10
        },
        animationDuration: 3000,
        animationEasingUpdate: 'quinticInOut',
        series: [{
          name: '知识图谱',
          type: 'graph',
          layout: 'force',
          force: {
            repulsion: 300,
            gravity: 0.1,
            edgeLength: 15,
            layoutAnimation: true,
          },
          data: listdata,
          links: linksdata,
          categories: [{
            name: '父节点',
            symbol: 'circle',
            symbolSize:60,
            label: {}
          }, {
            name: '层级二',
            symbol: 'circle',
            symbolSize:40,
          }, {
            name: '层级三',
            symbol: 'circle',
            symbolSize:30,
          }, {
            name: '层级四',
            symbol: 'roundRect',
            symbolSize:20,
          }],
          roam: true,
          label: {
            normal: {
              show: true,
              position: 'inside',
              formatter: '{b}',
              fontSize: 10,
              fontStyle: '600',
              color:'#fff'
            }
          },
          lineStyle: {
            normal: {
              opacity: 0.9,
              width: 1.5,
              curveness: 0
            }
          }
        }]
      }
      myChart.setOption(option)
      // 把echart实例追加到最外层window上
      window.top.chartsList && window.top.chartsList.push(myChart)
    })
  </script>
</body>

</html>